<template><!--测验报告-->
    <div class="warp-2" style="height:100%;overflow-y: auto;" id="test_report_scrolle_box">
        <navbar :title="$t('exam_report')" :backCallback="backFun" >
            <template #right>
                <a class="header-icon-refresh" @click="refreshFn(0, true)"></a>
            </template>
        </navbar>
        <div style="width: 100%;overflow-x: hidden;margin-top: 56px;" :class="{'white-bg' : isShowRefresh == false}">
            <div class="box-20 white-bg paddingLR15">
                <span style="float: left;">{{ $t('mod_total_score') }}<em class="color518">({{ fullScore }})</em></span><!--测验总分-->
                <span style="float: right;">{{ $t('mod_passing_score') }} <em class="color518">({{ passScore }})</em></span><!--合格分数-->
            </div>
            <div class="box-21">
                <p class="colorfff font-size11 paddingLR15">{{ totalAttemptNbr == 1 ? $t('exam_test_report_num', {'value': totalAttemptNbr}) : $t('exam_test_report_nums', {'value': totalAttemptNbr})}}</p><!--共{{ totalAttemptNbr }}条测验报告记录-->
                <div class="scroller-x" ref="recordQuestionIndex">
                    <div class="num-list-01 clearfix" :style="{'width' : (58 * attemptList.length) + 'px'}" >
                        <div :class="{'cur' : attemptNbr == (index+1)}" v-for="(attempt, index) in attemptList" :key="index" @click="refreshFn(index+1, false)">
                            <i class="first-place-icon" v-if="maxScorePgrAttempt === (index+1) && maxScore !== 0"></i>
                            <b>{{ index+1 }}</b>
                            <em class="num-cur" v-if="attemptNbr == (index+1)"><em></em></em>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-22 clearfix">
                <div class="box-table" style="height: 100px;padding: 0 0 0 15px;box-sizing: border-box;">
                    <!-- 考试成绩: 线上考试取 aeClassParamVO ，训后考试取 module，下同 -->
                    <div class="box-table-cell">
                        <p>{{ showScore ? (notScoreCnt > 0 ? '--' : totalScore) : '--' }}</p>
                        <p>{{ $t('exam_test_report_first_num', {'value': attemptNbr }) }}</p>
                    </div>
                </div>
                <i></i>
                <p>{{ isShowRefresh ? (notScoreCnt > 0 ? $t('cos_app_G') : ((totalScore >= passScore) ? $t('cos_app_pass') : $t('cos_app_flunk'))) : '--' }}</p><!--评分中、合格、不合格-->
                <em class="triangle-icon"></em>
            </div>
            <!--
                allen: 如果是单独设置的取module里面的值判断（例如:课程测验，考试，培训训后考试），
                如果是统一设置则取aeClassParamVO里面的值判断（例如： 培训线上考试）
            // 考完是否公开 0: 不公开,1:公开
            this.modShowAnswerInd = res.data.module.modShowAnswerInd;
            // 是否对合格学员公开 0: 不公开,1:公开
            this.modShowAAPassedInd = res.data.module.modShowAAPassedInd;
            // 结果查看内容:1考试成绩2每题得分3题目答案4题目解析
            this.modResContent = res.data.module.modResContent;
            // aeClassParamVO = {} =》 线上考试
            // acpScoreInd 是否查看 考试成绩
            // acpQueInd 是否查看 每题得分
            // acpAnsInd 是否查看 题目答案
            // acpDescInd 是否查看 题目解析
            // acpIsAuth 是否有权限查看 -->
            <!-- 考完是否公开 或者 合格对学员公开 -->
            <!-- this.$route.query.isOnlinExam === '1'是线上考试，否则是训后考试 -->
            <div v-if="(isOnlinExam && aeClassParamVO.acpIsAuth) ||
                (!isOnlinExam && (this.modShowAnswerInd === 1 || (this.modShowAAPassedInd === 1 && (totalScore >= passScore))))">
                <!-- 答案分析 -->
                <div  class="white-bg bottom-shadow" style="padding: 30px 15px;">
                    <p class="font-size16" style="font-weight: bold;margin-bottom: 15px;">{{ $t('exam_attempt_nbr_my_anwser_rpt') }}</p>{{$t('exam_attempt_nbr_my_anwser_rpt')}}
                    <ul class="module-list-16 clearfix">
                        <li class="right clearfix">
                            <div><!--正确题-->
                                <i class="circle"></i>{{ $t('exam_rpt_correct_question') }}({{ correctCnt }})
                            </div>
                        </li>
                        <li class="wrong clearfix">
                            <div><!--错误题-->
                                <i class="circle"></i>{{ $t('exam_rpt_wrong_question') }}({{ incorrectCnt }})
                            </div>
                        </li>
                        <li class="part clearfix">
                            <div><!--部分正确题-->
                                <i class="circle"></i>{{ $t('exam_rpt_partial_correct_question') }}({{ partiallyCorrecttCnt }})
                            </div>
                        </li>
                        <li class="not-yet clearfix">
                            <div><!--尚未评分题-->
                                <i class="circle"></i>{{ $t('exam_rpt_not_yet_rated') }}({{ notScoreCnt }})
                            </div>
                        </li>
                    </ul>
                </div>
                <!--详情题目解析-->
                <div class="margin-top10 white-bg">
                    <!-- 标题 题号 -->
                    <div style="padding: 30px 0 40px;">
                        <p class="font-size16 paddingLR15" style="font-weight: bold;">{{ $t('exam_rpt_topic_analysis') }}</p>
                        <div class="clearfix module-list-17">
                            <!--right 是正确的，wrong 是错误的，part 是部分正确，not-yet 是未评分-->
                            <div v-if="question.length < 13">
                                <a @click="goToQuestion(index)" v-for="(row, index) in question" :key="row.resId" :class="[(row.getScore >= 1 && row.queScore === row.getScore) ? 'right' : ((row.getScore == 0) ? 'wrong' : ((row.getScore == -1) ? 'not-yet' : 'part'))]">{{ ((index+1) > 9) ? (index+1) : ('0' + (index+1)) }}</a>
                            </div>
                            <div v-if="question.length > 12">
                                <template>
                                    <a href="javascript:void(0)" @click="goToQuestion(index)" v-for="(row, index) in question" v-if="index < 11" :key="row.resId" :class="[(row.getScore >= 1 && row.queScore === row.getScore) ? 'right' : ((row.getScore == 0) ? 'wrong' : ((row.getScore == -1) ? 'not-yet' : 'part'))]">{{ ((index+1) > 9) ? (index+1) : ('0' + (index+1)) }}</a>
                                </template>
                                <template v-if="question.length > 11 && moreQue">
                                    <a href="javascript:void(0)" @click="goToQuestion(index + 11)" :id="navId(index + 12)" v-for="(row, index) in question.slice(11)" :key="row.resId" :class="[(row.getScore >= 1 && row.queScore === row.getScore) ? 'right' : ((row.getScore == 0) ? 'wrong' : ((row.getScore == -1) ? 'not-yet' : 'part'))]">{{ index+12 }}</a>
                                </template>
                                <a href="javascript:void(0)" class="more" v-if="question.length > 12 && moreBtn" @click="moreDirectory()">{{ $t('more_text') }}</a><!--更多-->
                            </div>
                        </div>
                    </div>
                    <!-- 题目 -->
                    <div>
                        <div style="padding-bottom: 60px;" v-for="(que, index) in question" :key="index" :ref="index">
                            <div class="word-title-10">
                                <p class="paddingLR15 font-size16">
                                    {{ (index + 1) > 9 ? index+1 : ('0' + (index+1)) }}.
                                    <span v-html="$xss(imgHandle(que.queTitle))"></span>
                                    [{{ showQuesType(que) }}]
                                    <span v-if="que.queType !== 'SI'" :class="[(que.getScore >= 1 && que.queScore === que.getScore) ? 'rightTitle' : ((que.getScore == 0) ? 'wrongTitle' : ((que.getScore == -1) ? 'not-yetTitle' : 'partTitle'))]"> —— {{ showQueStatus(que) }}</span><!--答案正确/答案错误/答案尚未评分/答案部分正确-->
                                </p>
                            </div>
                            <!--单选题 start-->
                            <mcSingleQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && (que.queType === 'MC' && que.queLogic === 'SINGLE')"></mcSingleQues>
                            <!--判断题 start-->
                            <tfQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && (que.queType === 'TF')"></tfQues>
                            <!--多选题 start-->
                            <mcManyques :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && que.queType == 'MC' && (que.queLogic == 'AND' || que.queLogic == 'OR')"></mcManyques>
                            <!--问答题 start-->
                            <esQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && que.queType == 'ES'"></esQues>
                            <!--录音题 start-->
                            <srQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && que.queType == 'SR'"></srQues>
                            <!--配对题 start-->
                            <mtQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && que.queType == 'MT' && que.queSource != null"></mtQues>
                            <!--填空题 start-->
                            <fbQues :que="que" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="que.queType && que.queType == 'FB'"></fbQues>
                            <!-- 情景题 -->
                            <div v-if="que.queType && que.queType == 'SI'">
                                <div v-for="(childItem, childIndex) in que.questionDetailList" :key="childIndex" style="padding: 10px 0;">
                                    <div class="word-title-10">
                                        <p class="paddingLR15 font-size16">
                                            ({{ (childIndex + 1) > 9 ? childIndex+1 : ('0' + (childIndex+1)) }}).
                                            <span v-html="$xss(imgHandle(childItem.queTitle))"></span>
                                            [{{ showQuesType(childItem) }}]
                                            <span :class="[(childItem.getScore >= 1 && childItem.queScore === childItem.getScore) ? 'rightTitle' : ((childItem.getScore == 0) ? 'wrongTitle' : ((childItem.getScore == -1) ? 'not-yetTitle' : 'partTitle'))]"> —— {{ (childItem.getScore >= 1) ? $t('exam_rpt_ok_anwser') : ((childItem.getScore == 0) ? $t('exam_rpt_wrong_anwser') : ((childItem.getScore == -1) ? $t('exam_rpt_not_yet_anwser') : $t('exam_rpt_partial_correct_anwser'))) }}</span><!--答案正确/答案错误/答案尚未评分/答案部分正确-->
                                        </p>
                                    </div>
                                    <!--单选题-->
                                    <mcSingleQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && (childItem.queType === 'MC' && childItem.queLogic === 'SINGLE')"></mcSingleQues>
                                    <!--判断题-->
                                    <tfQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && (childItem.queType === 'TF')"></tfQues>
                                    <!--多选题-->
                                    <mcManyques :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && childItem.queType == 'MC' && (childItem.queLogic == 'AND' || childItem.queLogic == 'OR')"></mcManyques>
                                    <!--问答题-->
                                    <esQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && childItem.queType == 'ES'"></esQues>
                                    <!--配对题-->
                                    <mtQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && childItem.queType == 'MT' && childItem.queSource != null"></mtQues>
                                    <!--填空题-->
                                    <fbQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && childItem.queType == 'FB'"></fbQues>
                                    <!--录音题 start-->
                                    <srQues :que="childItem" :aeClassParamVO="aeClassParamVO" :isOnlineExam="isOnlinExam" :modResContent="modResContent" style="padding-top: 5px;" v-if="childItem.queType && childItem.queType == 'SR'"></srQues>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 暂无权限查看 -->
            <div v-else>
                <div class="noData" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../static/images/no-data.png" alt=""/>
                            <p class="color999">{{ $t("no_juris") }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="color999" style="padding: 150px 15px; text-align: center;" v-if="isShowRefresh == false && isMarkStatus == false">
                <p>{{ $t("exam_rpt_tips_1") }}</p><!--测验已提交-->
                <p>{{ $t("exam_rpt_tips_2") }}<i class="refresh-icon"></i></p><!--请点击右上角刷新按钮查看成绩-->
            </div>
            <div class="color999" style="padding: 150px 15px; text-align: center;" v-if="isShowRefresh == false && isMarkStatus == true">
                <span class="re-rating-btn" @click="reRating()">{{ $t("exam_rpt_re_rating") }}</span><!--重新评分-->
                <p style="margin-top: 5px;">{{ $t("exam_rpt_scoring_failed") }}</p><!--请点击右上角刷新按钮查看成绩-->
            </div>
        </div>
        <div class="loading" v-if="isLoading">
            <div >
                <div style="width: 33px;height: 33px;">
                    <img src="../../../static/images/loading.gif" alt="" style="width: 100%"/>
                </div>
                <div>{{ $t("lab_loading") }}</div><!--加载中...-->
            </div>
        </div>
        <van-dialog
            v-model="tstErrorTips"
            :confirm-button-text="$t('sure')"
            :title="tipsType"
            class="login-tip"
            >
        </van-dialog>
        <van-dialog
            v-model="visibilityTip"
            :confirm-button-text="$t('sure')"
            :title="$t('due_to') + countNumber + $t('forcibly')"
            class="login-tip"
            >
        </van-dialog>
    </div>
</template>

<script>
import Watermark from '@/libs/watermark.js';
import mcSingleQues from './components/mc-single-ques.vue';
import tfQues from './components/tf-ques.vue';
import mcManyques from './components/mc-many-ques.vue';
import esQues from './components/es-ques.vue';
import mtQues from './components/mt-ques.vue';
import fbQues from './components/fb-ques.vue';
import srQues from './components/sr-ques.vue';
export default {
    name: 'TestingReport',
    components: {
        mcSingleQues,
        tfQues,
        mcManyques,
        esQues,
        mtQues,
        fbQues,
        srQues
    },
    data() {
        return {
            isOnlinExam: this.$route.query.isOnlinExam === '1',
            isShowRefresh: true, //默认为true,不用点击刷新按钮
            tstScoreRows: [], //分数
            attemptNbr: 0, //当前次数
            totalAttemptNbr: 0, //最高次数（总次数）
            maxScorePgrAttempt: 0, //分数最高的次数
            maxScore: 0, //分数次数最高的次数
            totalScore: 0, //我的总分
            incorrectCnt: 0, //答错题目数
            correctCnt: 0, //答对题目数
            notScoreCnt: 0, //尚未评分题目数
            partiallyCorrecttCnt: 0, //部分正确题目数
            fullScore: 0, //试卷总分
            passScore: 0, //合格分数
            passPercent: 0, //合格率
            attemptList: [], //考试总次数
            directoryRows: [], //考试目录
            directorySubRows: [], //考试目录第12开始
            questionNum: 0, //题目总数
            question: [], //题目和选项
            result: [], //用户的答案
            modShowAnswerInd: 0,
            modShowAAPassedInd: 0,
            isFr: true,
            isLoading: false,
            moreQue: false, //当考试目录大于12条的时候隐藏12条以上的题目目录
            moreBtn: true, //考试目录更多按钮
            isMarkStatus: false, //重新评分按钮
            tstErrorTips: false, //是否显示提示框
            tipsType: '',
            isAuto: this.$route.query.isAuto, // 是否是切屏自动提交的
            countNumber: this.$route.query.count,
            cheat: this.$route.query.cheat,
            visibilityTip: false,
            modResContent: [], // 结果查看内容:1考试成绩2每题得分3题目答案4题目解析
            aeClassParamVO: {}, // 查看权限对象
            subjectList: [] // 题号列表
        };
    },
    methods: {
        backFun() {
            let isAPP = false;
            if (window.plus) {
                isAPP = true;
                Watermark.out(); // 清除用户水印
                Watermark.set(this.$route.query.examIframeUsrId);
            } else {
                document.addEventListener('plusready', function() {
                    isAPP = true;
                }, false);
            }
            console.log('isAPP', isAPP, '是否是训后考试----', !this.isOnlinExam);
            // 当他是APP且是训后考试时
            if (isAPP && !this.isOnlinExam) {
                if (window.plus) {
                    var ws = window.plus.webview.currentWebview();
                    ws.close();
                } else {
                    document.addEventListener('plusready', function() {
                        var ws = window.plus.webview.currentWebview();
                        ws.close();
                    }, false);
                }
            } else {
                this.$router.go(-1);
            }
        },
        /*考试目录id*/
        navId(index) {
            return 'navid_' + index;
        },
        moreDirectory() { //考试目录更多的按钮
            this.moreQue = true;
            this.moreBtn = false;
        },
        /*刷新页面功能*/
        idRefreshFn(attemptNbr, initFlag, totalAttemptNbr) {
            if (attemptNbr < totalAttemptNbr) {
                this.isShowRefresh = true;
            } else {
                this.attemptNbr = attemptNbr;
                this.$axios({
                    method: 'GET',
                    url: `/app/exam/whether/score`,
                    params: {
                        isMobile: true,
                        examId: this.$route.params.modId,
                        appId: this.$route.params.tkhId,
                        attemptNbr: attemptNbr || null
                    }
                }).then(res => {
                    this.isShowRefresh = res.data.result.info;
                    if (res.data.result.isMarkStatus) {
                        this.isMarkStatus = res.data.result.isMarkStatus;
                    }
                });
            }
        },
        /*重新评分功能*/
        reRating() {
            this.$axios({
                method: 'GET',
                url: `/app/exam/reRating/` + this.$route.params.modId
            }).then(res => {
                if (res.data.code === 301) {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('has_deleted_learning_record');
                } else if (res.data.code === 500) {
                    this.tstErrorTips = true;
                    this.tipsType = this.$t('exam_rpt_rerating_error');
                } else {
                    this.tipsType = this.$t('exam_rpt_rerating_sussess');
                    // this.refreshFn(0, true);
                }
                this.tstErrorTips = true;
            });
        },
        //刷新按钮，点击考试次数
        refreshFn(attemptNbr, isbo) {
            if (this.isFr === true) {
                this.totalScore = 0; //我的总分
                this.incorrectCnt = 0; //答错题目数
                this.correctCnt = 0; //答对题目数
                this.notScoreCnt = 0; //尚未评分题目数
                this.partiallyCorrecttCnt = 0; //部分正确题目数
                this.isFr = false;
                this.isLoading = true;
                this.isShowRefresh = false;
                /*this.tstDeatil(attemptNbr || 0, isbo);*/
                let delayed = 250;
                this.isMarkStatus = false;
                //等待数据加载完成
                this.tstDeatil(attemptNbr || 0, isbo);
            }
        },
        //题目目录锚点
        goToQuestion(index) {
            // if (this.modShowInd && this.modPassedInd && this.isShowRefresh) {
            if (this.isShowRefresh) {
                document.querySelector('#test_report_scrolle_box').scrollTop = this.$refs[index][0].offsetTop - 125;
            };
        },
        changeNavColor() {
            // 初始化，防止多次点击数据叠加
            this.notScoreCnt = 0;
            this.incorrectCnt = 0;
            this.correctCnt = 0;
            this.partiallyCorrecttCnt = 0;
            this.subjectList = [];
            this.question.map((que, index) => {
                this.subjectList.push(que);
                if (que.getScore === -1) { // 未评分
                    this.notScoreCnt = this.notScoreCnt + 1; // 尚未评分题目数
                } else if (que.getScore === 0) { // 错误
                    this.incorrectCnt = this.incorrectCnt + 1; // 回答错误题目数
                } else if (que.getScore > 0 && que.getScore === que.queScore) { // 正确
                    this.correctCnt = this.correctCnt + 1; // 回答正确题目数
                } else { // 部分正确
                    this.partiallyCorrecttCnt = this.partiallyCorrecttCnt + 1; // 部分正确题目数
                }
            });
        },
        //分数最高的次数
        getMaxScorePgrAttempt(maxScorePgrAttempt) {
            this.$axios({
                method: 'GET',
                url: `/app/module/getMaxProgressAttempt`,
                params: {
                    tkhId: this.$route.params.tkhId,
                    modId: this.$route.params.modId
                }
            }).then(res => {
                if (res.data.results !== undefined && res.data.results.length > 0) {
                    this.maxScorePgrAttempt = res.data.results[0].pgrAttemptNbr; //分数最高的次数
                    this.maxScore = res.data.results[0].pgrMaxScore; //分数次数最高的总分
                }
            });
        },
        //考试目录
        getExamDirectory(attemptNbr) {
            this.$axios({
                method: 'GET',
                url: `/app/module/getAllAnswerDetail`,
                params: {
                    tkhId: this.$route.params.tkhId,
                    modId: this.$route.params.modId,
                    attempt: attemptNbr
                }
            }).then(res => {
                this.directoryRows = res.data.results;
                this.directorySubRows = res.data.results.slice(11);
                this.questionNum = res.data.totalRecord;
            });
        },
        //获取考试答题详情
        getExamDetail(attemptNbr) {
            this.$axios({
                method: 'GET',
                url: `/app/api/module/test-report`,
                params: {
                    tkhId: this.$route.params.tkhId,
                    modId: this.$route.params.modId,
                    attemptNbr: attemptNbr
                }
            }).then(res => {
                // 考完是否公开 0: 不公开,1:公开
                this.modShowAnswerInd = res.data.module.modShowAnswerInd;
                // 是否对合格学员公开
                this.modShowAAPassedInd = res.data.module.modShowAAPassedInd;
                // 结果查看内容:1考试成绩2每题得分3题目答案4题目解析
                this.modResContent = res.data.module.modResContent ? res.data.module.modResContent.split(',') : [];
                // aeClassParamVO = {}
                // acpScoreInd 是否查看 考试成绩
                // acpQueInd 是否查看 每题得分
                // acpAnsInd 是否查看 题目答案
                // acpDescInd 是否查看 题目解析
                // acpIsAuth 是否有权限查看
                this.aeClassParamVO = res.data.aeClassParamVO;
                if (res.data.questionList !== undefined && res.data.progressAttemptList !== undefined) {
                    this.question = res.data.questionList;
                    this.result = res.data.progressAttemptList;
                    //循环所有的选项
                    //计算总分
                    if (this.question) {
                        this.question.map((list, index) => {
                            // 情景题
                            if (list.resSubtype === 'SI' && list.questionDetailList.length > 0) {
                                // 情景题总分
                                list.queScore = list.questionDetailList.reduce((acc, curr) => acc + curr.queScore, 0);
                            }
                            let totalQueScore = 0;
                            totalQueScore = list.queScore;
                            list.totalQueScore = totalQueScore;
                            //计算我的每题得分
                            if (this.result) {
                                // 情景题
                                if (list.resSubtype === 'SI' && list.questionDetailList.length > 0) {
                                    list.questionDetailList.map(v => {
                                        var resultAttemptList = [];
                                        var score = 0;
                                        var atmMaxScore = 0;
                                        this.result.map(item => {
                                            if (item.atmIntResId === v.resId) {
                                                score = score + item.atmScore;
                                                atmMaxScore = atmMaxScore + item.atmMaxScore;
                                                resultAttemptList.push(item);
                                            }
                                        });
                                        v.getScore = score;
                                        if (atmMaxScore > 0) {
                                            v.totalQueScore = atmMaxScore;
                                        }
                                        v.atmMaxScore = atmMaxScore;
                                        v.progressAttemptList = resultAttemptList.sort((a, b) => a.atmIntOrder - b.atmIntOrder);
                                        if (v.queType === 'MC' && (v.queLogic !== 'SINGLE')) {
                                            let arr = [];
                                            const str = v.progressAttemptList[0].atmResponseBil;
                                            if (str) {
                                                arr = str.split('[|]');
                                                for (const i in arr) {
                                                    arr[i] = parseInt(arr[i]);
                                                }
                                            }
                                            v.progressAttemptList[0].resultArr = arr;
                                        }
                                        if (v.queType === 'MT') {
                                            const arr = v.progressAttemptList;
                                            // 根據距離遠近排序，越近在前面，升序
                                            v.resultArr = arr;
                                        }
                                    });
                                    list.atmMaxScore = list.questionDetailList.reduce((acc, curr) => acc + curr.atmMaxScore, 0);
                                    list.getScore = list.questionDetailList.reduce((acc, curr) => acc + curr.getScore, 0);
                                    list.totalQueScore = list.questionDetailList.reduce((acc, curr) => acc + curr.atmMaxScore, 0);
                                } else {
                                    var resultAttemptList = [];
                                    var score = 0;
                                    this.result.map((item, index) => {
                                        if (item.atmIntResId === list.resId) {
                                            score = score + item.atmScore;
                                            resultAttemptList.push(item);
                                        }
                                    });
                                    list.getScore = score;
                                    list.progressAttemptList = resultAttemptList.sort((a, b) => a.atmIntOrder - b.atmIntOrder);
                                    if (list.queType === 'MC' && (list.queLogic !== 'SINGLE')) {
                                        let arr = [];
                                        let str = list.progressAttemptList[0].atmResponseBil;
                                        if (str) {
                                            arr = str.split('[|]');
                                            for (let i in arr) {
                                                arr[i] = parseInt(arr[i]);
                                            }
                                        }
                                        list.progressAttemptList[0].resultArr = arr;
                                    }
                                    if (list.queType === 'MT') {
                                        let arr = list.progressAttemptList;
                                        //根據距離遠近排序，越近在前面，升序
                                        list.resultArr = arr;
                                    }
                                }
                            }
                        });
                    }

                    if (this.question) {
                        this.changeNavColor();
                    }
                };
            });
        },
        tstDeatil(attempt, initFlag) {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/module/getTstScore/${attempt}`,
                params: {
                    tkhId: this.$route.params.tkhId,
                    modId: this.$route.params.modId
                }
            }).then(res => {
                this.tstScoreRows = res.data.results; //分数
                if (res.data.results && res.data.results.length > 0) {
                    this.attemptNbr = res.data.results[0].pgrAttemptNbr; //总次数
                    this.totalScore = Math.round(res.data.results[0].pgrScore); //我的总分
                    if (initFlag) {
                        this.totalAttemptNbr = res.data.results[0].pgrAttemptNbr;//最高次数（总次数）
                        this.maxScorePgrAttempt = res.data.results[0].pgrAttemptNbr;
                        //初始化
                        this.fullScore = res.data.results[0].pgrMaxScore; //试卷总分
                        this.passScore = res.data.results[0].pgrMaxScore * res.data.results[0].modPassScore / 100; //合格分数
                        this.passPercent = res.data.results[0].modPassScore + '%'; //合格率
                        //考试次数
                        let arrayObj = [];
                        for (let i = 0; i < this.attemptNbr; i++) {
                            arrayObj.push(i + 1);
                        }
                        this.attemptList = arrayObj;
                        this.getMaxScorePgrAttempt(this.maxScorePgrAttempt);
                    }
                    // TODO：因修改了题型展示，暂时不需要此接口，影响未知
                    // this.getExamDirectory(this.attemptNbr);
                    this.getExamDetail(this.attemptNbr);
                    this.isFr = true;
                    this.isLoading = false;
                    this.isShowRefresh = true;
                } else {
                    // 若无数据返回，则3s后重新请求
                    this.interval = setTimeout(() => {
                        this.tstDeatil(attempt, true);
                    }, 3000);
                }
                // this.idRefreshFn(res.data.results[0].pgrAttemptNbr, true, this.totalAttemptNbr);
            });
        },
        isAnwser(atmResponseBil, ind) {
            if (parseInt(atmResponseBil) === ind + 1) {
                return true;
            }
            return false;
        },
        // 多选题
        isTFAnwser(atmResponseBil, ind) {
            if (atmResponseBil.indexOf(ind + 1) > -1) {
                return true;
            }
            return false;
        },
        isOk(condition, orderid) {
            // console.log(this.result[orderid]);
            // var res = this.result[orderid].interaction[0].response;
            // if (res !== undefined) {
            //     for (var int = 0; int < res.length; int++) {
            //         if (res[int].text === condition) {
            //             return true;
            //         }
            //     }
            // }
            return false;
        },
        /**
         * 单选、判断答案的正确性
         * getAnswerCorrect答对或者这是正确的答案
         * getAnswerWrong答错的选项
         */
        getAnswerCorrect(que, index) {
            if (que.queLogic === 'SINGLE' && que.queRightOpt[0] === index + 1) {
                return true;
            }
            if (que.queType === 'TF') {
                let right = que.queRightOpt ? 0 : 1;
                if (right === index) {
                    return true;
                }
            }
        },
        getAnswerWrong(que, index) {
            if (que.queLogic === 'SINGLE' && parseInt(que.progressAttemptList[0].atmResponseBil) !== que.queRightOpt[0] && que.progressAttemptList[0].atmCorrectInd === false && index + 1 === parseInt(que.progressAttemptList[0].atmResponseBil)) {
                return true;
            }
            if (que.queType === 'TF') {
                let right = que.queRightOpt ? 0 : 1;
                if (parseInt(que.progressAttemptList[0].atmResponseBil) !== right && que.progressAttemptList[0].atmCorrectInd === false && index + 1 === parseInt(que.progressAttemptList[0].atmResponseBil)) {
                    return true;
                }
            }
        },
        /**
         * 多选答案的正确性
         * getAnswerMultiple答对或者这是正确的答案
         * getAnswerWrong答错的选项
         */
        getAnswerCorrectMultiple(que, index) {
            if (que.queRightOpt.indexOf(index + 1) > -1) {
                return true;
            }
        },
        getAnswerWrongMultiple(que, index) {
            if ((que.queRightOpt.indexOf(index + 1) === -1) && (que.progressAttemptList[0].resultArr.indexOf(index + 1) > -1)) {
                return true;
            }
        },
        /**
         * 配对题答案的正确性
         * getAnswerCorrectMatching答对或者这是正确的答案
         * getAnswerWrongMatching答错的选项
         */
        getAnswerCorrectMatching(que, index) {
            if (que.progressAttemptList[index].atmCorrectInd) {
                return true;
            }
        },
        getAnswerWrongMatching(que, index) {
            if (!que.progressAttemptList[index].atmCorrectInd) {
                return true;
            }
        },
        imgHandle(txt) {
            let parser = new DOMParser();
            let dom = parser.parseFromString(txt, 'text/html');
            // 处理auido标签
            let audioTags = dom.querySelectorAll('audio');
            audioTags.forEach(audioTag => {
                let src = audioTag.getAttribute('src');
                if (src) {
                    audioTag.setAttribute('src', this.appUrl + src);
                }
            });
            // 处理 <video> 标签
            let videoTags = dom.querySelectorAll('video');
            videoTags.forEach(videoTag => {
                let src = videoTag.getAttribute('src');
                if (src) {
                    videoTag.setAttribute('src', this.appUrl + src);
                }
            });
            // 处理 <img> 标签
            let imgTags = dom.querySelectorAll('img');
            imgTags.forEach(imgTag => {
                let src = imgTag.getAttribute('src');
                if (src) {
                    imgTag.setAttribute('src', this.appUrl + src);
                }
            });
            let htmlContent = dom.documentElement.innerHTML;
            htmlContent = htmlContent.replace(/<head>[.\s\S]*?<\/head>/, '').replace(/<body>|<\/body>/g, '');

            return htmlContent;
        },
        /**
         * 展示题型
         * */
        showQuesType(item) {
            // {{ (que.queType === 'MC') ? (que.queLogic === 'SINGLE' ? $t('Mc_sin') : $t('Mc')) : (que.queType=== 'FB' ? $t('FB') : (que.queType === 'TF' ? $t('TF') : (que.queType=== 'ES' ? $t('ES') : $t('MT')))) }}]
            if (item.queType === 'MC') {
                return item.queLogic === 'SINGLE' ? this.$t('Mc_sin') : this.$t('Mc');
            } else if (item.queType === 'FB') {
                return this.$t('FB');
            } else if (item.queType === 'TF') {
                return this.$t('TF');
            } else if (item.queType === 'ES') {
                return this.$t('ES');
            } else if (item.queType === 'MT') {
                return this.$t('MT');
            } else if (item.queType === 'SI') {
                return this.$t('SI');
            } else if (item.queType === 'SR') {
                return this.$t('SR');
            }
        },
        /**
         * 展示此题正确状态 */
        showQueStatus(value) {
            if (value.getScore >= 1 && value.getScore === value.queScore) {
                return this.$t('exam_rpt_ok_anwser');
            } else if (value.getScore === 0) {
                return this.$t('exam_rpt_wrong_anwser');
            } else if (value.getScore === -1) {
                return this.$t('exam_rpt_not_yet_anwser');
            } else {
                return this.$t('exam_rpt_partial_correct_anwser');
            }
        }
    },
    mounted() {
        if (this.cheat === 'true' && this.isAuto === 'true') {
            this.visibilityTip = true;
        } else {
            this.visibilityTip = false;
        }
        let attemptNbr = this.$route.query.attemptNbr || 0;
        this.isLoading = true;
        this.interval = setTimeout(() => {
            this.tstDeatil(attemptNbr, true);
        }, 3000);
    },
    computed: {
        showScore() {
            return (
                this.isShowRefresh &&
                (
                (this.isOnlinExam && this.aeClassParamVO.acpScoreInd) ||
                (!this.isOnlinExam && (this.modResContent && this.modResContent.length > 0 && this.modResContent.includes('1')))
                )
            );
        }
    },
    watch: {
        attemptList: function() {
            this.$nextTick(function() {
                let rightPx = this.$refs.recordQuestionIndex.children[0].scrollWidth - document.documentElement.clientWidth;
                this.$refs.recordQuestionIndex.scrollLeft = rightPx;
            });
        }
    },
    //英文序号
    filters: {
        enNo(value) {
            return String.fromCharCode(65 + value);
        }
    }
};
</script>

<style scoped lang="less">
    .header-icon-refresh {
        width: 45px;
        height: 56px;
        &:before {
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(./images/course-icon.png) no-repeat 5px -302px;
            background-size: 20px;
            margin: 13px 0 0 7px;
        }
    }
    .box-20 {
        height: 44px;
        line-height: 44px;
    }
    .box-21 {
        width: 100%;
        background: #26282e;
        overflow: hidden;
        p {
            height: 41px;
            line-height: 41px;
        }
    }
    .num-list-01 {
        div {
            display: inline-block;;
            width: 58px;
            height: 58px;
            color: #959ba6;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            &.cur {
                color: #ffffff;
            }
            b {
                display: block;
                line-height: 58px;
            }
            .num-cur {
                width: 5px;
                height: 5px;
                display: inline-block;
                border-radius: 50%;
                background: rgba(255,255,255,0.3);
                padding: 2px;
                position: absolute;
                bottom: 6px;
                left: 24px;
                em {
                    width: 5px;
                    height: 5px;
                    display: block;
                    border-radius: 50%;
                    background: #ffffff;
                }
            }
        }
    }
    .first-place-icon {
        background-position: 7px -24px;
        position: absolute;
        top: 0;
        left: 15px;
    }
    .box-22 {
        width: 100%;
        height: 100px;
        background: #075ebb;
        color: #ffffff;
        position: relative;
        & > div {
            width: calc(100% - 116px);
            float: left;
            p:nth-of-type(1) {
                font-size: 30px;
            }
        }
        i {
            float: left;
            height: 20px;
            border-left: 1px solid #3f71d5;
            margin-top: 40px;
        }
        & > p {
            width: 115px;
            float: left;
            line-height: 100px;
            text-align: center;
        }
    }
    .triangle-icon {
        width: 20px;
        height: 10px;
        background: url(./images/triangle-icon.png) no-repeat;
        background-size: 100%;
        position: absolute;
        bottom: -1px;
        left: 20px;
    }
    .module-list-16 {
        width: 100%;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        li {
            width: calc(100% / 2);
            float: left;
            padding: 20px 15px;
            box-sizing: border-box;
            .circle {
                width: 8px;
                height: 8px;
                border: 1px solid #00af78;
                background: #a1e5d0;
                border-radius: 50%;
                display: inline-block;
                margin-right: 5px;
            }
            .proportion {
                width: 100px;
                height: 8px;
                background: #f5f5f5;
                border-radius: 4px;
                margin-top: 8px;
                float: left;
                i {
                    float: left;
                    display: inline-block;
                    height: 8px;
                    border-radius: 4px;
                }
            }
            &.right {
                .proportion {
                    i {
                        background: #00af78;
                    }
                }
            }
            &.wrong {
                .circle {
                    border-color: #fc355d;
                    background: #fff2f5;
                }
                .proportion {
                    i {
                        background: #fc355d;
                    }
                }
            }
            &.part {
                .circle {
                    border-color: #333333;
                    background: #f5f5f5;
                }
                .proportion {
                    i {
                        background: #333333;
                    }
                }
            }
            &.not-yet {
                .circle {
                    border-color: #075ebb;
                    background: #f2f7ff;
                }
                .proportion {
                    i {
                        background: #075ebb;
                    }
                }
            }
        }
        li:nth-of-type(odd) {
            border-right: 1px solid #e6e6e6;
        }
        li:nth-of-type(1), li:nth-of-type(2) {
            border-bottom: 1px solid #e6e6e6;
        }
    }
    .module-list-17 {
        padding: 0 0 0 15px;
        a {
            float: left;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            text-align: center;
            line-height: 44px;
            margin: 15px 13px 0 0;
            font-size: 18px;
            background: #f2fffb;
            border: 1px solid #a1e6d0;
            color: #00af78;
            &.wrong {
                background: #fff2f5;
                border: 1px solid #ffe0e8;
                color: #fc355d;
            }
            &.part, &.more {
                background: #f5f5f5;
                border: 1px solid #e5e5e5;
                color: #333333;
            }
            &.not-yet {
                background: #f2f7ff;
                border: 1px solid #c2d6ff;
                color: #075ebb;
            }
            &.more {
                font-size: 12px;
            }
        }
    }
    .word-title-10 {
        background: #fafafa;
        padding: 15px 0;
    }
    .list-option {
        li {
            .border-box {
                margin: 15px 0 0 0;
                border: 1px solid #e6e6e6;
                border-radius: 4px;
                .title {
                    width: 100%;
                    span {
                        padding: 13px 10px 13px 0;
                        display: block;
                        color: #999999;
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .option-circle {
        display: inline-block;
        padding: 0 0 0 15px;
        box-sizing: border-box;
        &:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #cccccc;
            border-radius: 50%;
            margin-bottom: -4px;
        }
        &.cur:before {
            background: url(./images/course-icon.png) no-repeat -2px -338px;
            background-size: 20px;
        }
        &.current:before {
            border-radius: 3px;
        }
        &.current.cur:before {
            background: url(./images/course-icon.png) no-repeat -2px -368px;
            background-size: 20px;
        }
    }
    .answer-box {
        width: 60px;
        height: 100%;
        border-left: 1px solid #e6e6e6;
        span:before {
            content: "";
            display: block;
            width: 15px;
            height: 15px;
            background: url(./images/course-icon.png) no-repeat 0 -318px;
            background-size: 15px;
            margin: 0 auto;
        }
        span.wrong:before {
            background-position: 0 -298px;
        }
    }
    .box-23 {
        .line {
            float: left;
            width: 100%;
            border-top: 1px solid #e6e6e6;
        }
        .title {
            float: left;
            padding-right: 20px;
            background: #ffffff;
            margin-top: -11px;
        }
    }
    .refresh-icon {
        width: 16px;
        height: 14px;
        display: inline-block;
        background: url(./images/course-icon.png) no-repeat 2px -316px;
        background-size: 14px;
        margin-bottom: -1px;
    }
    .box-line {
        font-size: 14px;
        color: #1a1a1a;
        border-bottom: 1px solid #1a1a1a;
        padding: 0 10px;
        margin: 0 8px;
    }
    .rightTitle {
        color: #00af78;
    }
    .wrongTitle {
        color: #fc355d;
    }
    .partTitle {
        color: orange;
    }
    .not-yetTitle {
        color: #075ebb;
    }
    .loading{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        &>div{
            width: 112px;
            height: 112px;
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-radius: 16px;
            &>div:first-child{
                margin-bottom: 5px;
            }
        }
    }
    .re-rating-btn {
        line-height: 20px;
        background: #f7a900;
        color: #fff;
        border-radius: 3px;
        width: 80px;
        background-size: 40px;
        padding: 3px;
    }
    .noData{
      margin: 150px auto;
    }
    /deep/.login-tip .weui-skin_android{
        position: relative!important;
    }
    .scroller-x{
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .scroller-x::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }
    /deep/ .box-table img{
        width: 100%;
    }
</style>
